<template>
  <div class="admin-list">
    <ul class="list">
      <li v-for="d in list" :key="d.id" >
        <div
          class="cover"
          :style="{ 'background-image': `url(${d.cover})` }"
        ></div>
        <div class="info">
          <div class="name">{{ d.album }} - {{ d.singer }}</div>
        </div>
        <button @click="detail(d.id)">查看详情</button>
        <router-link :to="'/main/detail?id=' + d.id">查看详情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import list from '../album-list';
export default {
  data() {
    return {
      list
    }
  },
  methods: {
    detail(id) {
      // location.href = './#/main/detail?id=' + id;

      // 跳转到一个路由页面
      this.$router.push('/main/detail?id=' + id);
      // console.log(this.$router)
    }
  }
}
</script>

<style lang="sass" >
.list
    padding: 15px
    background: #fff
    margin: 0 auto
    & + .list
      margin-top: 20px
    li
      display: flex
      align-items: center
      justify-content: space-between
      padding: 20px 0
      & + li
        border-top: 1px solid #ddd
      .cover
        width: 80px
        height: 80px
        border-radius: 50%
        background-size: cover
        background-color: #eee
      .info
        flex: 1
        padding-left: 20px
        text-align: left
</style>
